"use client";

import { useState } from "react";
import { Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card } from "@/components/ui/card";

export function SearchRides() {
  const [departure, setDeparture] = useState("");
  const [destination, setDestination] = useState("");
  const [date, setDate] = useState("");

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    // TODO: Implement search functionality
    console.log({ departure, destination, date });
  };

  return (
    <Card className="p-6 bg-white/95 backdrop-blur">
      <form onSubmit={handleSearch} className="flex flex-col md:flex-row gap-4">
        <Input
          type="text"
          placeholder="出发地"
          value={departure}
          onChange={(e) => setDeparture(e.target.value)}
          className="flex-1"
        />
        <Input
          type="text"
          placeholder="目的地"
          value={destination}
          onChange={(e) => setDestination(e.target.value)}
          className="flex-1"
        />
        <Input
          type="date"
          value={date}
          onChange={(e) => setDate(e.target.value)}
          className="flex-1"
        />
        <Button type="submit" className="md:w-auto">
          <Search className="mr-2 h-4 w-4" />
          搜索
        </Button>
      </form>
    </Card>
  );
}